<template>
  <div class="box">
    <div class="content">
      <div style="padding:.1rem .3rem;height: 2rem; display: flex; justify-content: space-between; align-items: center; background-color: #EEE;border-radius: .5rem .5rem 0 0;">
        <span>音乐列表</span>
        <div>
          <div style="display: inline-block; padding: 0 .5rem 0 0;">
            <Button class="del-btn" @click="openSelector()">
              <svg t="1650974669664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1884" width="20" height="20"><path d="M511.256 0C228.9 0 0 228.9 0 511.256 0 623.8 36.805 727.509 98.429 811.957l38.415-39.993c-51.592-73.945-82.067-163.708-82.067-260.709 0-252.105 204.374-456.479 456.479-456.479 252.089 0 456.466 204.374 456.466 456.479 0 252.101-204.376 456.466-456.466 456.466-96.102 0-185.157-29.847-258.709-80.565l-34.387 42.609c83.032 58.26 183.962 92.734 293.096 92.734 282.351 0 511.245-228.894 511.245-511.244C1022.5 228.9 793.606 0 511.256 0z" p-id="1885" fill="#0e932e"></path><path d="M492.979 255.62 492.979 492.986 255.613 492.986 255.613 547.762 492.979 547.762 492.979 785.128 547.756 785.128 547.756 547.762 785.121 547.762 785.121 492.986 547.756 492.986 547.756 255.62Z" p-id="1886" fill="#0e932e"></path></svg>
            </Button>
          </div>
          <div style="display: inline-block; padding: 0 0 0 .5rem;">
            <Button class="del-btn" @click="close()">
              <svg t="1650974750607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4348" width="20" height="20"><path d="M511.333 127.333c51.868 0 102.15 10.144 149.451 30.15 45.719 19.337 86.792 47.034 122.078 82.321 35.287 35.286 62.983 76.359 82.321 122.078 20.006 47.3 30.15 97.583 30.15 149.451s-10.144 102.15-30.15 149.451c-19.337 45.719-47.034 86.792-82.321 122.078-35.286 35.287-76.359 62.983-122.078 82.321-47.3 20.006-97.583 30.15-149.451 30.15s-102.15-10.144-149.451-30.15c-45.719-19.337-86.792-47.034-122.078-82.321-35.287-35.286-62.983-76.359-82.321-122.078-20.006-47.3-30.15-97.583-30.15-149.451s10.144-102.15 30.15-149.451c19.337-45.719 47.034-86.792 82.321-122.078 35.286-35.287 76.359-62.983 122.078-82.321 47.301-20.006 97.583-30.15 149.451-30.15m0-64c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448z" fill="#d81e06" p-id="4349"></path><path d="M557.254 512l147.373-147.373c12.497-12.497 12.497-32.758 0-45.255-12.496-12.497-32.758-12.497-45.254 0L512 466.746 364.627 319.373c-12.497-12.497-32.758-12.497-45.255 0s-12.497 32.758 0 45.255L466.746 512 319.373 659.373c-12.497 12.496-12.497 32.758 0 45.254C325.621 710.876 333.811 714 342 714s16.379-3.124 22.627-9.373L512 557.254l147.373 147.373C665.621 710.876 673.811 714 682 714s16.379-3.124 22.627-9.373c12.497-12.496 12.497-32.758 0-45.254L557.254 512z" fill="#d81e06" p-id="4350"></path></svg>
            </Button>
          </div>
        </div>
      </div>
      <div style="overflow: auto; padding: 0 .5rem;">
        <ul class="music-list">
          <li v-for="(m,i) in clockData.audios" :key="m" >
            <div class="li-box">
              <span>{{m.audioName}}</span>
              <div class="li-box">
                <swipe-num v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="minuteTimeInput" prefix-fixed="1" after-fixed="0" height="1.5rem" width="2rem" :num-val="m.repeatTimes" type="string" @update="v=>updateRepeatTimes(m.id, v)"></swipe-num>
                <Button class="del-btn" @click="delMusic(m.id,i)">
                  <svg t="1650695525843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4099" width="20" height="20"><path d="M989.866667 238.933333A102.4 102.4 0 0 0 887.466667 136.533333h-107.861334v-34.133333A102.4 102.4 0 0 0 677.205333 0h-341.333333a102.4 102.4 0 0 0-102.4 102.4V136.533333H136.533333A102.4 102.4 0 0 0 102.4 335.189333V887.466667a136.533333 136.533333 0 0 0 136.533333 136.533333h546.133334a136.533333 136.533333 0 0 0 136.533333-136.533333V335.189333a102.4 102.4 0 0 0 68.266667-96.256z m-688.128-136.533333a34.133333 34.133333 0 0 1 34.133333-34.133333h341.333333a34.133333 34.133333 0 0 1 34.133334 34.133333V136.533333h-409.6zM853.333333 887.466667a68.266667 68.266667 0 0 1-68.266666 68.266666H238.933333a68.266667 68.266667 0 0 1-68.266666-68.266666V341.333333h682.666666z m34.133334-614.4h-750.933334a34.133333 34.133333 0 0 1 0-68.266667h750.933334a34.133333 34.133333 0 0 1 0 68.266667z" fill="#d81e06" p-id="4100"></path><path d="M341.333333 836.266667a34.133333 34.133333 0 0 0 34.133334-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266667 0v307.2a34.133333 34.133333 0 0 0 34.133333 34.133334zM512 836.266667a34.133333 34.133333 0 0 0 34.133333-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266666 0v307.2a34.133333 34.133333 0 0 0 34.133333 34.133334zM682.666667 836.266667a34.133333 34.133333 0 0 0 34.133333-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266667 0v307.2a34.133333 34.133333 0 0 0 34.133334 34.133334z" fill="#d81e06" p-id="4101"></path></svg>
                </Button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <music-selector v-if="musicPane" @update="m=>selectMusic(m)"/>
  </div>
</template>
<style lang="css" scoped>
.box {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background-color: rgba(255,255,255,.5);
}
.content {
  position: fixed;
  left:1rem;
  right:1rem;
  bottom:4rem;
  top:3rem;

  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: #FFF;
  border-radius: .5rem;
  box-shadow: 0 0 1rem #AAA;
}
.music-list>li {
  border-bottom: .01rem solid #EEE;
}
.music-list>li:active {
  background-color: #EEE;
}
.music-list>li .li-box {
  padding: .3rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.music-list .li-box >span{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: normal;
  word-wrap: normal;
  white-space: nowrap;
}
.del-btn {
  width: 21px;
  height:21px;
  border-radius: 21px;
  padding:0;
  border:none;
}
</style>
<script>
import request from "@/requestutil"
import musicSelector from '@/views/clock/MusicSelector'
import swipeNum from "@/views/tools/Swipe_Num";
export default {
  name : "MusicUpdater",
  props:['clockData'],
  components: {
    musicSelector,
    swipeNum
  },
  data() {
    return {
      id: 0,
      musicPane: false
    }
  },
  watch: {
    id(newVal) {
      this.$emit("update", newVal)
    }
  },
  mounted() {
  },
  methods:{
    close() {
      this.id = -1
    },
    openSelector() {
      console.log('>')
      this.musicPane = true
    },
    selectMusic(music) {
      this.musicPane = false
      let self = this
      if (music) {
        music.clockId = this.clockData.id
        request.post('/api/clock/addOrUpdateClockAudio',music)
        .then(r=>{
          if (r.data.code == 1) {
            music.id = r.data.data
            self.clockData.audios.push(music)
            window.openMsg('添加音乐成功',true)
          } else {
            window.openMsg('添加音乐失败: '+r.data.msg)
          }
        })
      }
    },
    updateRepeatTimes(id, times) {
      request.post('/api/clock/addOrUpdateClockAudio',{id: id, repeatTimes: times})
          .then(data=>{
            if (data.data.code == 1) {
              window.openMsg('修改重复次数成功',true)
            } else {
              window.openMsg('修改重复次数失败: '+data.data.msg)
            }
          })
    },
    delMusic(id, index) {
      let self = this
      request.post('/api/clock/deleteAudio',{id: id})
          .then(data=>{
            if (data.data.code == 1) {
              self.clockData.audios.splice(index,1)
              window.openMsg('删除成功',true)
            } else {
              window.openMsg('删除失败: '+data.data.msg)
            }
          })
    }
  }
}
</script>